<template>
<div>
  <h1> {{state.name}} {{state.age}}</h1>
  <h2>toRef  {{toRefAge}}</h2>
</div>
</template>

<script>
import { ref, toRef, reactive} from 'vue'
export default {
  name: 'toRef',
  setup() {
    const state = reactive({
      age: 18,
      name: 'xueguo'
    })
    
    const toRefAge = toRef(state, 'age')
    setTimeout(() => {
      state.age = 20
    }, 1500)
    setTimeout(() => {
      toRefAge.value = 25
    }, 3000)
    return {
      state,
      toRefAge
    }
  }
}
</script>

<style>

</style>